<template>
  <a-card title="模式切换">
    <a-radio-group
      size="small"
      option-type="button"
      v-model:value="store.$state.theme.algorithm"
      :options="themeOptions"
      @change="setTheme"
    ></a-radio-group>
  </a-card>
  <a-card>
    <template #title>
      <div>控件属性</div>
    </template>
    <a-space class="w-100" direction="vertical" :size="24">
      <a-flex class="w-100" justify="space-between">
        <div class="flex align-center">
          <div>文字方向</div>
        </div>
        <div>
          <a-switch
            un-checked-value="ltr"
            checked-value="rtl"
            v-model:checked="store.$state.theme.direction"
          ></a-switch>
        </div>
      </a-flex>

      <a-flex class="w-100" justify="space-between">
        <div class="flex">水波纹特效</div>
        <div class="text-right">
          <a-switch
            v-model:checked="store.$state.theme.wave"
            checked-children="开"
            un-checked-children="关"
          ></a-switch>
        </div>
      </a-flex>

      <a-flex class="w-100" justify="space-between">
        虚拟滚动
        <a-switch
          v-model:checked="store.$state.theme.virtual"
          checked-children="开"
          un-checked-children="关"
        ></a-switch>
      </a-flex>
      <a-flex class="w-100" justify="space-between">
        <div>移除按钮中的空格</div>
        <a-flex :gap="8" :align="'center'">
          <a-switch
            v-model:checked="store.$state.theme.autoInsertSpaceInButton"
            checked-children="开"
            un-checked-children="关"
          ></a-switch>
        </a-flex>
      </a-flex>
      <a-flex class="w-100" justify="space-between">
        <div>控件大小</div>
        <a-radio-group v-model:value="store.$state.theme.size">
          <a-radio-button value="small">小</a-radio-button>
          <a-radio-button value="medium">中</a-radio-button>
          <a-radio-button value="large">大</a-radio-button>
        </a-radio-group>
      </a-flex>
    </a-space>
  </a-card>
</template>

<script setup lang="ts">
import usePageStore from '@/store/page';
import { useCssVar } from '@vueuse/core';
import type { RadioChangeEvent } from 'ant-design-vue';
import { themeOptions } from '../data/options';

const store = usePageStore();
const setTheme = (e: RadioChangeEvent) => {
  const underpainting = useCssVar('--underpainting', document.body);
  if (e.target.value === 'dark') {
    underpainting.value = 'black';
    store.$state.theme.underpainting = 'black';
  } else if (e.target.value === 'default') {
    underpainting.value = 'white';
    store.$state.theme.underpainting = 'white';
  }
};
</script>

<style lang="scss" scoped></style>
